<template>
    <div>
        <el-form :inline="true" :model="roleSearchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="roleSearchParam.name"
                    placeholder="名称"
                />
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" size="small" @click="search">查询</el-button>
                <el-button type="primary" size="small" @click="addView(null)">添加角色</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.roles" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中">
            <el-table-column prop="name" label="名称" align="center" width="150px"/>
            <el-table-column prop="encode" label="角色编码" align="center" width="200px"/>
            <el-table-column prop="remark" label="角色备注" align="center" width="300px"/>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="addView(scope.row)"
                        type="info"
                        size="small"
                    >编辑
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="viewPermissions(scope.row.uuid)"
                        type="primary"
                        size="small"
                    >分配权限
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该评论举报类型吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteCommentReportType(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或修改角色-->
        <el-dialog :title="data.title" v-model="data.roleAddOrUpdateDisable">
            <el-form :model="roleAddOrUpdateData" :rules="rules" ref="addFormRef">
                <el-form-item label="名称" label-width="130px" prop="name">
                    <el-input v-model="roleAddOrUpdateData.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="编码" label-width="130px" prop="encode">
                    <el-input v-model="roleAddOrUpdateData.encode" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="备注" label-width="130px" prop="remark">
                    <el-input v-model="roleAddOrUpdateData.remark" autocomplete="off" type="textarea"/>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="data.roleAddOrUpdateDisable = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdateRole">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 查看分配权限-->
        <el-dialog title="菜单权限" v-model="data.viewPermissionsDisable">
            <el-tree :data="data.menuProps" node-key="uuid" :props="data.defaultProps"
                     show-checkbox lazy ref="menuTree" :default-checked-keys="data.defaultCheckMenu"
                     :load="loadMenu" :default-expand-all="true"/>
            <div style="text-align: center">
                <el-button @click="data.viewPermissionsDisable = false">取 消</el-button>
                <el-button type="primary" @click="addRoleMenu">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {page, add, update, assignPermissions, listMenuByRoleUuid} from "@/api/role/role";
import {reactive, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {listByParentUuid} from "@/api/menu/menu";

export default {
    setup() {
        const data = reactive({
            roles: [],
            total: 0,
            loading: false,
            roleAddOrUpdateDisable: false,
            roleUpdateUuid: '',
            title: '',
            viewPermissionsDisable: false,
            menuProps: [],
            defaultProps: {
                label: 'name',
                children: 'children',
                isLeaf: 'hasChildren',
                value: 'uuid'
            },
            defaultParentUuid: '0',
            rootNode: {},
            rootResolve: {},
            assignRoleUuid: '',
            defaultCheckMenu: []
        })
        const roleSearchParam = reactive({
            page: 1,
            size: 10,
            name: ''
        })
        const roleAddOrUpdateData = reactive({
            name: '',
            encode: '',
            remark: ''
        })
        const rules = reactive({
            name: [
                {
                    required: true,
                    message: "请输入角色名称",
                    trigger: "blur",
                },
            ],
            encode: [
                {
                    required: true,
                    message: "请输入角色编码",
                    trigger: "blur",
                },
            ],
            remark: [
                {
                    required: true,
                    message: "请输入角色备注",
                    trigger: "blur",
                },
            ]
        })
        const addFormRef = ref(null)
        const menuTree = ref(null)
        /**
         * 分页查询角色
         */
        const pageSearchRole = () => {
            page(roleSearchParam).then(res => {
                data.roles = res.data.records
                data.total = res.data.total
            })
        }
        const addView = (row) => {
            data.roleAddOrUpdateDisable = true
            if (row != null) {
                data.title = '编辑角色'
                roleAddOrUpdateData.name = row.name
                roleAddOrUpdateData.encode = row.encode
                roleAddOrUpdateData.remark = row.remark
                data.roleUpdateUuid = row.uuid
            } else {
                data.title = '添加角色'
                reset()
            }
        }
        /**
         * 重置角色添加数据
         */
        const reset = () => {
            roleAddOrUpdateData.name = ''
            roleAddOrUpdateData.encode = ''
            roleAddOrUpdateData.remark = ''
            data.roleUpdateUuid = ''
        }
        /**
         * 添加或修改角色
         */
        const addOrUpdateRole = () => {
            addFormRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                if (data.roleUpdateUuid) {
                    update(roleAddOrUpdateData, data.roleUpdateUuid).then(() => {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        data.roleAddOrUpdateDisable = false
                        pageSearchRole()
                    })
                } else {
                    // 添加
                    add(roleAddOrUpdateData).then(() => {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        data.roleAddOrUpdateDisable = false
                        pageSearchRole()
                    })
                }
            })
        }
        /**
         * 搜索查询
         */
        const search = () => {
            roleSearchParam.page = 1
            pageSearchRole()
        }
        /**
         * 查看分配权限
         * @param uuid
         */
        const viewPermissions = (uuid) => {
            data.assignRoleUuid = uuid
            data.viewPermissionsDisable = true
            setTimeout(function () {
                menuTree.value.setCheckedKeys([])
                listMenuByRoleUuid(uuid).then(res => {
                    data.defaultCheckMenu = res.data
                })
            }, 100)

        }
        /**
         * 展开子集菜单
         * @param data
         */
        const nodeExpand = (data) => {
            listByParentUuid(data.uuid).then(res => {
                res.data.map(menu => {
                    menu.hasChildren = !menu.hasChildren
                })
                data.children = res.data
            })
        }
        const loadMenu = (node, resolve) => {
            data.rootNode = node
            data.rootResolve = resolve
            if (node.level === 0) {
                listByParentUuid(data.defaultParentUuid).then(res => {
                    res.data.map(menu => {
                        menu.hasChildren = !menu.hasChildren
                    })
                    resolve(res.data)
                })
            } else {
                listByParentUuid(node.data.uuid).then(res => {
                    res.data.map(menu => {
                        menu.hasChildren = !menu.hasChildren
                    })
                    resolve(res.data)
                })
            }
        }
        /**
         * 设置角色权限
         */
        const addRoleMenu = () => {
            const checkedMenuUuids = menuTree.value.getCheckedKeys(false)
            assignPermissions(checkedMenuUuids, data.assignRoleUuid).then(() => {
                ElMessage({
                    message: '分配成功',
                    type: 'success',
                })
                data.viewPermissionsDisable = false
            })
        }
        onMounted(() => {
            pageSearchRole()
        })
        return {
            data,
            roleSearchParam,
            roleAddOrUpdateData,
            rules,
            addFormRef,
            menuTree,
            addView,
            addOrUpdateRole,
            search,
            viewPermissions,
            addRoleMenu,
            nodeExpand,
            loadMenu
        }
    }
}
</script>